<template>
  <div class="other">
    <div class="from-titles">or sign in width</div>

    <ul class="sing">
      <li v-for="(item, index) in thirdParty" :key="index" class="signicon">
        <i class="iconfont" :class="item.name" @click="goto(item.url)"></i>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { thirdParty } from '../utils/enums'
const thirdPartys = thirdParty
const goto = (e: any) => {
  window.location.href = e
}
</script>
<style lang="scss" scoped>
.other {
  text-align: center;
  .from-titles {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 14px;
    color: #bdbdbd;
    margin-top: 20px;

    //   .signicon {
    //     margin: 0 auto;
    //   }
  }
  .sing {
    margin: 10px auto 0px;
    width: 260px;
    display: flex;
    justify-content: space-around;
    .signicon {
      .iconfont {
        font-size: 25px !important;
      }
    }
  }
}
</style>
